<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="shortcut icon" href="statics/img/favicon_lill.ico" type="image/x-icon">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>汽车经销商利润核算数字化管理平台</title>
	<style>
	* {
		box-sizing: border-box;
	}
	
	p {
		margin: 0;
	}
	
	body {
		padding: 0;
		margin: 0;
		font-family: "Helvetica Neue", Helvetica, "PingFang SC",
			"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
	}
	
	.page {
		position: absolute;
		top: 0;
		left: 0;
		height: 100%;
		width: 100%;
		background: url('statics/img/login_jrqx.jpg');
		background-position: center;
		background-repeat: no-repeat;
		background-attachment: fixed;
		background-size: cover;
		-webkit-background-size: cover; /* 兼容Webkit内核浏览器如Chrome和Safari */
	}
	
	.loginBox {
		text-align: center;
		background: rgba(75, 88, 109, 0.23);
		color: #fff;
		font-size: 32px;
		text-shadow: rgb(0, 179, 254) 0px 0px 20px;
		position: absolute;
		top: 30%;
		right: 10%;
		padding: 0 80px;
	}
	
	.formItem {
		margin: 0 auto;
		width: 250px;
		height: 45px;
		margin-bottom: 15px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
	}
	
	.formItem input {
		height: 45px;
		padding: 4px 7px;
		border: 1px solid #dddee1;
		border-radius: 4px;
		color: #495060;
		background-color: #fff;
		background-image: none;
		position: relative;
		cursor: text;
		box-sizing: border-box;
		transition: border .2s ease-in-out, background .2s ease-in-out,
			box-shadow .2s ease-in-out;
		position: absolute;
		top: 0;
		left: 0;
	}
	
	.loginBtn {
		height: 45px;
		width: 250px;
		border-radius: 4px;
		background: #f6b118;
		line-height: 45px;
		text-align: center;
		font-size: 22px;
		color: #fff;
		margin: 0 auto;
		transition: .3s;
		margin-bottom: 50px;
		cursor:pointer;
	}
	
	.loginBtn:hover {
		background: rgb(230, 136, 24);
	}
	
	.alert {
		position: absolute;
		top: -150px;
		left: calc(( 100% - 100px)/2);
		background: #fff;
		border-radius: 8px;
		display: flex;
		justify-content: space-between;
		font-size: 12px;
		align-items: center;
		padding: 10px;
		opacity: 0;
		transition: .8s;
	}
	
	.alert .alertIcon {
		width: 20px;
		height: 20px;
		margin-right: 4px;
	}
	
	.alert .alertIcon img {
		width: 100%;
		height: 100%;
	}
	
	.alertShow {
		top: 50px !important;
		opacity: 1;
	}
	</style>
	</head>
	<!-- <script src="https://cdn.bootcss.com/jquery/3.4.0/jquery.slim.min.js"></script> -->
	<script src="statics/libs/jquery.min.js"></script>
	<body>
		<div class="page">
			<div id="loginBox" class="loginBox">
				<p style="padding: 20px 20px 20px 20px; font-size: 25px; text-shadow: 0 0 20px rgb(0, 179, 254)">汽车经销商利润核算数字化管理平台</p>
				<div class="formItem">
					<input value="admin" id="username" name="username" placeholder="请输入账号" style="width: 250px;" autofocus />
				</div>
				<div class="formItem">
					<input value="888888" type="password" name="password" id="password" style="width: 250px;" placeholder="请输入密码" />
				</div>
				<div class="formItem">
					<input id="captcha" name="captcha" placeholder="请输入验证码" style="width: 55%;float:left;" maxlength="4" />
					<img id="codeImg" style="height: 45px; width: 96px; border-radius: 4px; font-size: 10px;cursor:pointer;position: absolute;top: 0;right: 0;" alt="如果看不清楚，请单击图片刷新！" title="点击刷新"
						src="captcha.jpg" onclick="refreshCode()">
				</div>
				<div class="loginBtn" onclick="doLogin()">登录</div>
			</div>
			<div class="alert">
				<div class="alertIcon">
					<img src="statics/img/alert.png" alt="">
				</div>
				<div class="alertContent">用户名不能为空</div>
			</div>
		</div>
		<script type="text/javascript">
		window.history.go(1);
		$(document).ready(function(){ 
			if (self!=top) {
            	top.location.href = self.location.href;
        	}
            $('#username,#password,#captcha').bind('keypress',function(event){
                if(event.keyCode == "13") {
                    doLogin ()
                }
            });
		});
		
		function refreshCode(){
			$("#codeImg").attr("src","captcha.jpg?t=" + $.now());
		}
		
	    function doLogin () {
	    	var userName = $('#username').val();
	      	var passWord = $('#password').val();
	      	var captcha = $('#captcha').val()
	      	if (!userName) {
	      		myalert('用户名不能为空');refreshCode();$('#username').focus();return;
	      	}
	      	if (!passWord) {
	      		myalert('密码不能为空');refreshCode();$('#password').focus();return;
	      	}
	      	if (!captcha) {
	      		myalert('验证码不能为空');refreshCode();$('#captcha').focus();return;
	      	}
	      	// 验证通过 调取登录接口
	      	var data = "username=" + userName + "&password=" + passWord + "&captcha=" + captcha;
          	$.ajax({
          		type: "POST",
              	url: "sys/login",
              	data: data,
              	dataType: "json",
              	success: function (result) {
              		if (result.code == 0) {//登录成功
              			parent.location.href = 'index.html';
                  	} else {
                  		refreshCode();myalert(result.msg);
                  	}
              	}
          	});
	    }
	    function myalert(content) {
	    	$('.alertContent').text(content)
	      	$('.alert').addClass('alertShow')
	      	setTimeout(function() {
	        	$('.alert').removeClass('alertShow')
	      	}, 1200)
	    }
	  </script>
	</body>
</html>